<template>
  <TopNav title="术前营养评估"/>
  <div class="postoperative-nutrition-page">

    <!-- 患者信息区域 -->
    <div class="patient-info-section">
      <h2 class="section-title">患者信息</h2>
      <el-form :model="patientForm">
        <el-form-item label="姓名">
          <el-input v-model="patientForm.name"></el-input>
        </el-form-item>
        <el-form-item label="手术类型">
          <el-input v-model="patientForm.surgeryType"></el-input>
        </el-form-item>
        <el-form-item label="术后天数">
          <el-input-number v-model="patientForm.postOpDays"></el-input-number>
        </el-form-item>
      </el-form>
    </div>

    <!-- 营养摄入记录区域 -->
    <div class="nutrition-intake-section">
      <h2 class="section-title">营养摄入记录</h2>
      <el-table :data="intakeRecords" style="width: 100%">
        <el-table-column prop="date" label="日期" width="150"></el-table-column>
        <el-table-column prop="mealType" label="餐别" width="120"></el-table-column>
        <el-table-column prop="foodItems" label="食物种类" width="250"></el-table-column>
        <el-table-column prop="quantity" label="数量" width="120"></el-table-column>
        <el-table-column label="操作" width="120">
          <template #default="{ row }">
            <el-button
                type="danger"
                @click="deleteIntakeRecord(row)"
                icon="el-icon-delete"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="intake-form">
        <h3 class="form-title">添加营养摄入记录</h3>
        <el-date-picker
            v-model="newIntakeRecord.date"
            type="date"
            placeholder="日期"
            class="input-record"
        />
        <el-select
            v-model="newIntakeRecord.mealType"
            placeholder="餐别"
            class="input-record"
        >
          <el-option label="早餐" value="早餐"></el-option>
          <el-option label="午餐" value="午餐"></el-option>
          <el-option label="晚餐" value="晚餐"></el-option>
        </el-select>
        <el-input
            v-model="newIntakeRecord.foodItems"
            placeholder="食物种类"
            class="input-record"
        />
        <el-input-number
            v-model="newIntakeRecord.quantity"
            placeholder="数量"
            class="input-record"
        />
        <el-button
            type="primary"
            @click="addIntakeRecord"
            :disabled="!newIntakeRecord.date ||!newIntakeRecord.mealType ||!newIntakeRecord.foodItems ||!newIntakeRecord.quantity"
        >添加记录</el-button>
      </div>
    </div>

    <!-- 营养指标监测区域 -->
    <div class="nutrition-monitoring-section">
      <h2 class="section-title">营养指标监测</h2>
      <el-form :model="monitoringForm">
        <el-form-item label="血清蛋白(g/L)">
          <el-input-number v-model="monitoringForm.serumProtein" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="血红蛋白(g/L)">
          <el-input-number v-model="monitoringForm.hemoglobin" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="血糖(mmol/L)">
          <el-input-number v-model="monitoringForm.bloodGlucose" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="体重变化(kg)">
          <el-input-number v-model="monitoringForm.weightChange" :min="0"></el-input-number>
        </el-form-item>
      </el-form>
      <el-button
          type="success"
          @click="saveMonitoringData"
          :disabled="!monitoringForm.serumProtein ||!monitoringForm.hemoglobin ||!monitoringForm.bloodGlucose ||!monitoringForm.weightChange"
      >保存监测数据</el-button>
    </div>

    <!-- 营养分析与建议区域 -->
    <div class="nutrition-analysis-section">
      <h2 class="section-title">营养分析与建议</h2>
      <p>营养状况评估：<span>{{ nutritionStatus }}</span></p>
      <p>营养调整建议：<span>{{ nutritionAdvice }}</span></p>
      <div id="chart-container" style="width: 100%; height: 300px;"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, watch } from 'vue';
import * as echarts from 'echarts';
import TopNav from "@/components/TopNav/Back.vue"
// 患者信息表单数据
const patientForm = ref({
  name: '',
  surgeryType: '',
  postOpDays: 0
});

// 营养摄入记录数组
const intakeRecords = ref([
  {
    date: '2024-05-01',
    mealType: '早餐',
    foodItems: '鸡蛋、牛奶、面包',
    quantity: 1
  },
  {
    date: '2024-05-01',
    mealType: '午餐',
    foodItems: '鸡肉、蔬菜、米饭',
    quantity: 1
  }
]);
// 新营养摄入记录对象
const newIntakeRecord = ref({
  date: '',
  mealType: '',
  foodItems: '',
  quantity: 0
});

// 营养指标监测表单数据
const monitoringForm = ref({
  serumProtein: 0,
  hemoglobin: 0,
  bloodGlucose: 0,
  weightChange: 0
});

// 营养状况评估结果
const nutritionStatus = ref('');
// 营养调整建议
const nutritionAdvice = ref('');

// 删除营养摄入记录
const deleteIntakeRecord = (row) => {
  const index = intakeRecords.value.indexOf(row);
  if (index > -1) {
    intakeRecords.value.splice(index, 1);
    ElMessage.success('营养摄入记录删除成功');
  }
};

// 添加营养摄入记录
const addIntakeRecord = () => {
  intakeRecords.value.push({...newIntakeRecord.value });
  newIntakeRecord.value = {
    date: '',
    mealType: '',
    foodItems: '',
    quantity: 0
  };
  ElMessage.success('营养摄入记录添加成功');
};

// 保存营养监测数据并生成分析与建议
const saveMonitoringData = () => {
  // 简单的评估逻辑示例，可根据实际情况完善
  if (monitoringForm.value.serumProtein < 60 && monitoringForm.value.hemoglobin < 100 && monitoringForm.value.bloodGlucose > 7) {
    nutritionStatus.value = '营养不足，血糖偏高';
    nutritionAdvice.value = '增加优质蛋白质摄入，如瘦肉、鱼类、豆类等；控制碳水化合物摄入，监测血糖变化；密切关注营养指标，必要时调整营养方案。';
  } else if (monitoringForm.value.serumProtein >= 60 && monitoringForm.value.hemoglobin >= 100 && monitoringForm.value.bloodGlucose <= 7) {
    nutritionStatus.value = '营养状况良好';
    nutritionAdvice.value = '继续维持当前营养摄入，根据身体恢复情况适当调整食物种类和数量；定期监测营养指标。';
  } else {
    nutritionStatus.value = '需进一步评估';
    nutritionAdvice.value = '综合分析各项指标，调整营养方案，可咨询营养师或医生意见。';
  }

  // 更新图表数据
  const chartDom = document.getElementById('chart-container');
  const myChart = echarts.init(chartDom);
  const xAxisData = ['血清蛋白', '血红蛋白', '血糖', '体重变化'];
  const yAxisData = [
    monitoringForm.value.serumProtein,
    monitoringForm.value.hemoglobin,
    monitoringForm.value.bloodGlucose,
    monitoringForm.value.weightChange
  ];
  const option = {
    xAxis: {
      type: 'category',
      data: xAxisData
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '监测指标',
        type: 'bar',
        data: yAxisData,
        barWidth: 20,
        itemStyle: {
          color: '#5cb85c'
        }
      }
    ]
  };
  myChart.setOption(option);
};

// 页面加载时初始化图表
onMounted(() => {
  const chartDom = document.getElementById('chart-container');
  const myChart = echarts.init(chartDom);
  const xAxisData = ['血清蛋白', '血红蛋白', '血糖', '体重变化'];
  const yAxisData = [0, 0, 0, 0];
  const option = {
    xAxis: {
      type: 'category',
      data: xAxisData
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '监测指标',
        type: 'bar',
        data: yAxisData,
        barWidth: 20,
        itemStyle: {
          color: '#5cb85c'
        }
      }
    ]
  };
  myChart.setOption(option);
});

// 监听监测数据变化，更新图表
watch(monitoringForm, () => {
  const chartDom = document.getElementById('chart-container');
  const myChart = echarts.init(chartDom);
  const xAxisData = ['血清蛋白', '血红蛋白', '血糖', '体重变化'];
  const yAxisData = [
    monitoringForm.value.serumProtein,
    monitoringForm.value.hemoglobin,
    monitoringForm.value.bloodGlucose,
    monitoringForm.value.weightChange
  ];
  myChart.setOption({
    xAxis: {
      data: xAxisData
    },
    series: [
      {
        data: yAxisData
      }
    ]
  });
}, { deep: true });
</script>

<style scoped>
.postoperative-nutrition-page {
  padding: 20px;
  background-color: #f4f4f5;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.page-header {
  text-align: center;
  margin-bottom: 20px;
}
.header-title {
  color: #303133;
  font-size: 28px;
}
.patient-info-section {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}
.section-title {
  color: #303133;
  margin-bottom: 10px;
}
.nutrition-intake-section {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}
.intake-form {
  margin-top: 20px;
}
.form-title {
  color: #303133;
  margin-bottom: 10px;
}
.input-record {
  width: 100%;
  margin-bottom: 10px;
}
.nutrition-monitoring-section {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}
.nutrition-analysis-section {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
}
</style>
